<template>
  <div>


    <div style="padding: 10px;">
      <div style="margin-bottom: 10px">
        <span class="titleStyle">预警信息直播</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleDetail">更多</el-button>
      </div>

      <div v-for="(article, index) in visibleArticles" :key="index" class="article" @click="GotoDetail(article.id)">
        <div style="display: flex;height: 70px">

          <div class="li-right">
            <div class="time-line-time">{{article.publishTime}}</div>
          </div>


          <div style="margin-left: 10px;margin-right: 10px;text-align: center">
            <div class="qinggan">
            </div>

            <div class="shuxian">
            </div>


          </div>

          <div>
            <el-tag effect="dark"
                    size="mini" type="danger"
                    v-if="article.level==='red'">
              红色预警
            </el-tag>
            <el-tag effect="dark"
                    size="mini" type="warning"
                    v-if="article.level==='orange'">
              橙色预警
            </el-tag>
            <el-tag color="yellow"
                    effect="light" size="mini"
                    v-if="article.level==='yellow'">
              黄色预警
            </el-tag>
          </div>

          <div>
            <div class="title-style">{{ article.title!=='无'?article.title:article.summary }}</div>
            <div class="time-line-footer">[{{article.siteName}}]</div>
          </div>

        </div>
      </div>


    </div>


  </div>
</template>

<script>
  import {queryWarningList} from "@/api/system/opinion";

  export default {
    data() {
      return {
        currentIndex: 0,
        loading: false,
        warnings: [],
        visibleArticles: [],
        queryParams: {},
        pageParams: {
          pageNum: 1,
          pageSize: 10,
        },
      }
    },
    created() {

      this.getOption()

    },
    methods: {
      handleDetail() {
        this.$router.push({path: '/forecast/list'});
      },
      GotoDetail(id) {
        this.$router.push({path: '/opinion/detail', query: {id: id}});
      },
      scrollArticles() {
        setInterval(() => {
          this.visibleArticles = this.warnings.slice(this.currentIndex, this.currentIndex + 5);
          this.currentIndex = (this.currentIndex + 1) % (this.warnings.length - 4);
        }, 3000); // Change the interval as per your requirement
      },
      buildParam() {
        this.queryParams.mediaType = []
        this.queryParams.level = this.selectWarningLevel
        this.queryParams.timeType = this.timeType

      },

      getOption() {
        this.buildParam();
        console.log(JSON.stringify(this.queryParams))
        this.queryParams.sort = 'desc';
        queryWarningList(this.pageParams, this.queryParams).then(response => {
          this.warnings = response.rows
          this.eventsTotal = response.total
          this.scrollArticles()
        })
      },


    }
  }
</script>

<style>
  .titleStyle {
    text-align: justify;
    font-weight: bold;
    font-size: 18px;
  }

  .title-style {
    width: 1000px;
    cursor: pointer;
    font-size: 16px;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .time-line-time {
    color: #34495e;
    font-size: 16px;
    font-weight: 400;
  }

  .time-line-footer {
    font-size: 14px;
    color: #8d989d;
    margin-top: 5px;
  }


  .li-right {
    width: 150px;
  }


  .qinggan {
    width: 16px;
    background: url() no-repeat;
    background-size: auto;
    background-size: cover;
    height: 16px;
  }

  .shuxian {
    margin-left: 7px;
    width: 2px;
    background-color: #e3ebee;
    height: 55px;
  }


</style>
